<template>
	<view class="market_list">
		<Navbar>坊市</Navbar>
		<view class="tabs">
			<view class="item" :class="active==item.key?'active':''" @click="changeActive(item)"
				v-for="(item,index) in list">
				{{item.value}}
			</view>
		</view>
		<view class="content">
			<image :src="`${baseImageUrl}/common/hot_cover1.png`" class="cover" v-if="active=='foodstuff'"></image>
			<image :src="`${baseImageUrl}/common/hot_cover2.png`" class="cover" v-else-if="active=='cloth'"></image>
			<image :src="`${baseImageUrl}/common/hot_cover3.png`" class="cover" v-else-if="active=='titledeed'">
			</image>
			<image :src="`${baseImageUrl}/common/hot_cover4.png`" class="cover" v-else-if="active=='music'"></image>
			<image :src="`${baseImageUrl}/common/hot_cover5.png`" class="cover" v-else></image>
			<view class="list">
				<!-- <view class="item" @click="router('/pages/home/harvest_record')"> -->
				<view class="item">
					<text>剩余：{{balance}}</text>
					<image :src="`${baseImageUrl}/common/right.png`"></image>
				</view>
				<view class="item" @click="router(`/pages/home/sell_list?type=${active}`)">
					<text>出售中：{{sell_number}}</text>
					<image :src="`${baseImageUrl}/common/right.png`"></image>
				</view>
			</view>
		</view>
		<view class="btn_view">
			<view class="buy" @click="open(1)">买{{text}}</view>
			<view class="sell" @click="open(2)">卖{{text}}</view>
		</view>
		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<SellListAlert :field="active" :text="text" @close="close" v-if="popup==1" />
			<SellPopup :total="balance" :field="active" :text="text" @close="close" v-if="popup==2" />
		</u-popup>
	</view>
</template>

<script>
	import {
		userSellIndex
	} from '@/request/api.js';
	import SellListAlert from '@/components/home/SellListAlert.vue';
	import SellPopup from '@/components/home/SellPopup.vue';
	export default {
		components: {
			SellListAlert,
			SellPopup
		},
		data() {
			return {
				list: [{
					key: "foodstuff",
					value: "粮食",
				}, {
					key: "cloth",
					value: "布匹",
				}, {
					key: "titledeed",
					value: "房契",
				}, {
					key: "music",
					value: "乐谱",
				}, {
					key: "escort",
					value: "镖旗",
				}],
				active: "foodstuff",
				text: "",

				balance: "",
				sell_number: "",

				popup_show: false,
				popup: 1
			}
		},
		onLoad(option) {
			let type = this.active = option.type ?? "foodstuff";
			let dataItem = this.list.find(item => item.key == type);
			this.text = dataItem.value;
		},
		onShow() {
			this.getDeta();
		},
		methods: {
			async getDeta() {
				let {
					balance,
					sell_number
				} = await userSellIndex({
					field: this.active
				});
				this.balance = balance;
				this.sell_number = sell_number;
			},
			changeActive(item) {
				this.active = item.key;
				this.text = item.value;
				this.getDeta();
				// this.number = this.user[item.key];
			},
			open(index) {
				this.popup = index;
				this.popup_show = true;
			},
			close() {
				this.getDeta();
				this.popup_show = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.market_list {
		height: 100vh;
		// padding: 0 15rpx;
		// box-sizing: border-box;
		background: #29170D;
		overflow: hidden;

		.tabs {
			width: 710rpx;
			height: 100rpx;
			margin: 0 auto;
			padding: 0 10rpx;
			box-sizing: border-box;
			background-color: rgba(31, 11, 5, 0.6);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				width: 142rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 400;
				font-family: LiSu;

				&.active {
					color: #494338;
					background: url(#{$baseImageUrl}/common/active.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.content {
			width: 100%;
			height: 668rpx;
			margin: 62rpx 0 80rpx;
			padding: 150rpx 0 68rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/common/market_bg.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.cover {
				width: 240rpx;
				height: 240rpx;
			}

			.list {
				.item {
					width: 368rpx;
					height: 54rpx;
					margin-bottom: 26rpx;
					background: url(#{$baseImageUrl}/home/title3.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					&:last-child {
						margin-bottom: 0;
					}

					text {
						color: #494338;
						font-size: 36rpx;
						font-weight: 400;
						font-family: LiSu;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 25rpx;
						top: 7rpx;
					}
				}
			}
		}

		.btn_view {
			width: 100%;
			display: flex;
			justify-content: center;

			view {
				width: 210rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				margin: 0 15rpx;
			}

			.buy {
				background: url(#{$baseImageUrl}/common/btn3.png) no-repeat;
				background-size: 100% 100%;
			}

			.sell {
				background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>